<!-- eslint-disable vue/multi-word-component-names -->


<template>
  <main>
   <span> <img @click="goBack" class="fan"  src="../../assets/icon/hdpi/fh.png" alt=""></span>
     <span class="bang">绑定银行卡</span>
     <div>
        <img class="bang1" src="../../assets/icon/hdpi/bankcard.png" alt="">
       <div class="cha">
         <span class="cha1">X</span>
       </div>
       
       <button class="bang3" @click="confirm">确定</button>
     </div>
  </main>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';

    const router = useRouter(); 
function goBack() {  
      // 使用router.go(-1)模拟浏览器的后退操作  
      router.go(-1);  
    } 

    const confirm=()=>
    {
        router.push('/binding')
    }
    
  
</script>
<style>
.bang1{
    position: absolute;
    width: 220px;
    height: 150px;
    top: 120px;
    left: 70px;
    border-radius: 10px;
}
.cha{
    width: 30px;
    height: 20px;
    position: absolute;
    background: red;
    text-align: center;
    color: #fff;
    top: 110px;
    left: 310px;
    border-radius: 50px;
}
.bang2{
    position: absolute;
    top: 290px;
    left: 75px;
      border-radius: 10px;
}
.cha2{
    position: absolute;
    width: 30px;
    height: 20px;
    background: red;
    color: #fff;
    top: 290px;
    left: 310px;
    text-align: center;
    border-radius: 50px;
}
.bang3{
    position: absolute;
    top: 500px;
    width: 240px;
    height: 50px;
    background: #3086e8;
    border: none;
    left: 70px;
    border-radius: 10px;
    color: #fff;
}
</style>